<script lang="ts" setup>
import type { RouteRecordRaw, RouteRecordNameGeneric } from 'vue-router';
import { useRouter } from 'vue-router';

defineOptions({
  name: 'Menus',
});
defineProps<{ routes: RouteRecordRaw[] }>();
const router = useRouter();
const handleLinkTo = (routeName: RouteRecordNameGeneric) => {
  router.push({
    name: routeName,
  });
};
</script>
<template>
  <div class="route" v-for="item in routes" :key="item.name">
    <div v-if="item.children && item.children.length > 0">
      <div class="text-blue-700">{{ item.meta?.title }}</div>
      <Menus :routes="item.children" />
    </div>
    <div
      v-else
      class="cursor-pointer px-4 py-2 text-blue-400 underline"
      @click="handleLinkTo(item.name)"
    >
      {{ item.meta?.title }}
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
